<template>
  <!-- 顶部操作栏 -->
  <div class="topTool">
    <!-- 输入 & 选择框：1.技能昵称  2.岗位类型id-->
    <div class="mt-4">
      <el-input
          v-model="input"
          placeholder="搜索内容"
          class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="搜索方式" style="width: 130px;">
            <el-option label="技能类型名称" value="1" />
            <el-option label="所属职位类型ID" value="2" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" style="width: 50px" @click="handleSearch"/>
        </template>
      </el-input>
    </div>
    <!-- 添加按钮 -->
    <el-button :icon="Plus" style="margin-left: 20px;" type="primary" @click="handleAdd">添加技能</el-button>
  </div>
  <!-- el-table数据表格组件 -->
  <el-table
      :data="userData"
      :header-cell-style="{ background: 'rgb(245,247,250)'}"
      empty-text="暂无数据"
      style="margin-top: 20px;width: 100%;"
      border
  >
    <!-- el-table-column列 -->
    <!-- 技能类型ID -->
    <el-table-column prop="id" label="技能类型ID" sortable></el-table-column>
    <!-- 技能类型名称 -->
    <el-table-column prop="skillName" label="技能类型名称"></el-table-column>
    <!-- 职位类型ID -->
    <el-table-column prop="jobTypeId" label="所属职位类型ID" sortable></el-table-column>
    <!-- 职位类型名称 -->
    <el-table-column prop="jobTypeName" label="所属职位类型名称"></el-table-column>
    <!-- 操作：1.修改  2.删除 -->
    <el-table-column label="操作" width="165">
      <template #default="{ row }">
        <el-button type="warning" plain size="small" :icon="Edit" @click="handleEdit(row)">修改</el-button>
        <el-button type="danger" plain size="small" :icon="Delete" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <el-pagination
      background
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      style="margin-top: 5px"
  />
  <!-- 添加岗位类型 -->
  <el-dialog v-model="dialogFormVisibel" :title="dialogTitle" style="width: 440px">
    <div>
      技能类型名称：
      <el-input v-model="newSkill.skillName" style="width: 300px;"></el-input>
    </div>
    <div style="margin-top: 10px;">
      职位类型名称：
      <el-select v-model="selectJobTypeId" placeholder="请选择该技能所属职位类型" style="width: 300px;">
        <el-option v-for="item in jobType" :key="item.jobTypeId" :label="item.jobTypeName" :value="item.jobTypeId"/>
      </el-select>
    </div>
    <template #footer>
      <el-button type="primary" @click="dialogOk" >确定</el-button>
      <el-button @click="dialogFormVisibel=false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {Plus, Delete, Edit, Search} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {adminApi} from "../../api/app";

// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

//定义用户信息数据
const userData = ref([]);
const currentPage = ref(1);//定义当前页码
const pageSize = ref(10);//定义每页显示记录数
const total = ref(0);//总记录数
//获取当前页数据
const getData = () => {
  adminApi.getAllSkill({
    size: pageSize.value,
    page: currentPage.value
  }).then(response => {
    userData.value = response.data;
    total.value = response.total;
  }).catch(error => {
    console.error(error);
  })
};
//处理页码变化点击事件
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getData();
};

const input = ref(); // 搜索框输入信息
const select = ref(); // 搜索方式选择栏信息
// 处理搜索
const handleSearch = () => {
  if (input.value.length > 0) { // 输入框有内容，根据内容查询数据
    if(select.value === '1') { // 技能名称
      adminApi.searchSkillByName({
        size: pageSize.value,
        page: currentPage.value,
        skillName: input.value,
      }).then(response => {
        userData.value = response.data;
        total.value = response.total;
      }).catch(error => {
        console.error(error);
      })
    } else { // 岗位类型ID
      console.log(input.value);
      adminApi.searchSkillByJobId({
        size: pageSize.value,
        page: currentPage.value,
        jobTypeId: input.value
      }).then(response => {
        userData.value = response.data;
        total.value = response.total;
      }).catch(error => {
        console.error(error);
      })
    }
  } else { // 输入框无内容，显示所有数据
    getData()
  }
}

const dialogFormVisibel = ref(false);
const dialogTitle = ref('添加技能类型');
const newSkill = ref({
  id: 0,
  skillName: '',
  jobTypeId: 0,
  jobTypeName: ''
});
const jobType = ref([]);
// 处理添加按钮
const handleAdd = () => {
  dialogFormVisibel.value = true;
  dialogTitle.value = '添加技能类型';
  // 得到职位类型
  adminApi.getAllJobType({
    size: 99,
    page: 1
  }).then(response => {
    jobType.value = response.data;
  }).catch(error => {
    console.error(error);
  })
}
const selectJobTypeName = ref('');
const selectJobTypeId = ref();
// 处理编辑按钮
const handleEdit = (row) => {
  dialogFormVisibel.value = true;
  dialogTitle.value = '修改技能类型';
  newSkill.value = {...row};
  // 得到职位类型
  adminApi.getAllJobType({
    size: 99,
    page: 1
  }).then(response => {
    jobType.value = response.data;
  }).catch(error => {
    console.error(error);
  })
  // 选中职位类型
  selectJobTypeName.value = newSkill.value.jobTypeName;
  selectJobTypeId.value = newSkill.value.jobTypeId;
}
// 表单内确定按钮
const dialogOk = () => {
  const job = jobType.value.find(item => item.jobTypeId === selectJobTypeId.value);
  if(dialogTitle.value === '添加技能类型') {
    adminApi.addSkill({
      skillName: newSkill.value.skillName,
      jobTypeId: selectJobTypeId.value,
      jobTypeName: job.jobTypeName
    }).then(response => {
      if(response.message === '操作成功') {
        dialogFormVisibel.value = false;
        ElMessage({ type: 'success', message: '添加成功！' });
        getData();
      } else {
        ElMessage({ type: 'error', message: '数据已存在，添加失败！' });
      }
    }).catch(error => {
      console.error(error);
    })
  } else { // 编辑技能类型
    adminApi.editSkill({
      id: newSkill.value.id,
      skillName: newSkill.value.skillName,
      jobTypeId: selectJobTypeId.value,
      jobTypeName: job.jobTypeName
    }).then(response => {
      dialogFormVisibel.value = false;
      ElMessage({ type: 'success', message: '修改成功！' });
      getData();
    }).catch(error => {
      console.error(error);
    })
  }
}

// 处理删除按钮点击事件
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '您确定要删除ID为【' + row.id + '】的技能类型数据吗?',
      '危险操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        delrow(row)
        ElMessage({
          type: 'success',
          message: '完成删除！',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除!',
        })
      })
}
// 删除行数据
const delrow = (row) => {
  adminApi.deleteSkillById({
    id: row.id
  }).then(response => {
    getData();
  }).catch(error => {
    console.error(error);
  })
};
</script>

<style scoped>
.topTool {
  display: flex;
  justify-content: space-between; /* 元素沿着主轴均匀分布 */
  align-items: center; /* 元素在交叉轴上居中对齐 */
  z-index: 0;
  position: relative;
}
.topTool .mt-4 {
  flex: 1; /* 让这个元素占据剩余空间 */
}
</style>
